<script lang="tsx">
import { defineComponent, onMounted, ref, type PropType, computed } from 'vue';
import ObsImage from '#/components/obsImage.vue';
import { type LivesDetailResponse } from '#/api/competition/lives';
import { Eye, UsersRound, ChevronDown } from '@vben/icons';
import { $t } from '#/locales';
import { formatNumberWithCommas } from '#/utils/formatNumber';

export default defineComponent({
  name: 'CompetitionLives',
  props: {
    newsDetailData: {
      type: Object as PropType<LivesDetailResponse>,
    }
  },
  setup(props) {
    const readFontSize = ref(14);
    onMounted(() => {
    });

    const getTotalViews = computed(() => {
      return (data: LivesDetailResponse) => {
        return formatNumberWithCommas(data?.initialViews + data?.views);
      }
    });

    const getTotalVisitors = computed(() => {
      return (data: LivesDetailResponse) => {
        return formatNumberWithCommas(data?.initialVisitors + data?.visitors);
      }
    });

    return () => (
      <div class="bg-[#fff] px-[24px] py-[16px] rounded-[16px]">
        <div class="news-content-title text-[28px] text-[500] text-[#191919] leading-[34px] mb-[24px]">{props.newsDetailData?.subject}</div>
        <div class="flex items-center justify-between pb-[16px] mb-[16px] border-b border-[#DCDFE6]">
          <div class="flex items-center">
            <span class="item-date text-[14px] text-[#AEAEAE] leading-[20px] mr-[30px]">{props.newsDetailData?.publishTime}</span>
            <div class="flex items-center gap-2 text-[14px]">
              <Eye class="w-[12px] h-[12px] text-[#595959]" />
              <span class="item-tag text-[12px] text-[#AEAEAE] leading-[20px] mr-[16px]">{getTotalViews.value(props.newsDetailData as LivesDetailResponse)}</span>
              <UsersRound class="w-[12px] h-[12px] text-[#595959]" />
              <span class="item-tag text-[12px] text-[#AEAEAE] leading-[20px]">{getTotalVisitors.value(props.newsDetailData as LivesDetailResponse)}</span>
            </div>
          </div>
          <div>
            <el-dropdown
              onCommand={(command: number) => {
                readFontSize.value = command;
              }}
              v-slots={{
                default: () => (
                  <div class="text-[14px] text-[#595959] leading-[20px] flex items-center">
                    {$t('competition.lives.fontSize')}
                    <ChevronDown class="w-[12px] h-[12px] ml-[4px]" />
                  </div>
                ),
                dropdown: () => (
                  <el-dropdown-menu>
                    <el-dropdown-item command={12}>12px</el-dropdown-item>
                    <el-dropdown-item command={14}>14px</el-dropdown-item>
                    <el-dropdown-item command={16}>16px</el-dropdown-item>
                    <el-dropdown-item command={18}>18px</el-dropdown-item>
                    <el-dropdown-item command={20}>20px</el-dropdown-item>
                  </el-dropdown-menu>
                )
              }}
            />
          </div>
        </div>
        <div class="news-content-content mb-[12px]">
          {
            props.newsDetailData?.img && (
              <ObsImage key={props.newsDetailData?.img} src={props.newsDetailData?.img || ''} />
            )
          }
          <div class="news-content-content-text py-[16px] border-b border-[#DCDFE6]" style={{ fontSize: readFontSize.value + 'px', lineHeight: (readFontSize.value + 8) + 'px'}} v-html={props.newsDetailData?.content}></div>
        </div>
        <div class="text-[14px] text-[#AEAEAE] leading-[20px]">{$t('competition.lives.welcomeToReprint')}</div>
      </div>
    );
  }
})
</script>

<style scoped></style>
